@charset "utf-8";
@import "utilities/variables";

html{
	/*font-size:62.5%;*/
	height:100%;
	body{
		height:100%;margin:0;
		.wrapper{
			height: 100%;
			.header{
				height: 50px;
				.logo-container{
					width: 260px;
					height: 50px;
					float: left;
					background: #4dc1ff url(../img/logo.png) no-repeat 45px center;
					cursor: pointer;
					padding-left: 90px;
					line-height: 50px;
					color: #fff;
					font-size: 18px;
				}
				.right-container{
					margin-left: 260px;
					height: 50px;
					background-color: #fff;
					box-shadow: 0 2px 2px rgba(227, 226, 228, 0.4);
					-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=180, Color='#d6d5d7')";
					.shop-dropdown{
						margin: 0px;
						width: 240px;
						margin-left: 20px;
						float: left;
						height: 100%;
						md-select{
							margin: 10px 0 0 0;
						}
					}
					.profile{
						.msg{
							height: 50px;
							line-height: 50px;
							margin-right: 20px;
							float: left;
							font-size: 14px;
							cursor: pointer;
							position: relative;
							&.unread{
								i::after{
									content: ' ';
									display: block;
									position: absolute;
									width: 8px;
									height: 8px;
									background-color: #ff0000;
									top: 15px;
									left: 15px;
									border-radius: 50%;
									box-shadow: 0px 0px 5px #ff0000;
								}
							}
						}
						.user{
							height: 50px;
							line-height: 50px;
							margin-right: 20px;
							float: left;
							.user-img{
								width: 20px;
								height: 20px;
								border: 1px solid #f1f1f1;
								border-radius: 50%;
								background: url(../img/icon.png);
								background-size: 100%;
								cursor: pointer;
								float: left;
								margin-top: 15px;
								margin-right: 10px;
								md-select{
									width: 32px;
									height: 32px;
									border-radius: 50%;
									opacity: 0;
									margin: 0;
								}
							}
							.username{
								font-size: 14px;
								float: left;
							}
						}
					}
				}
			}
			.main{
				top: 50px;
				height: auto;
				position: absolute;
				width: 100%;
				bottom: 0;
				.left-menu{
					height: 100%;
					width: 260px;
					float: left;
					background-color: #2f3a4d;
					ul{
						li{
							height: 80px;
							line-height: 80px;
							cursor: pointer;
							color: #a1afb7;
							position: relative;
							button{
								width: 100%;
								height: 100%;
								margin: 0;
								padding-left: 44px;
								text-align: left;
								border-radius: 0;
								font-size: 16px;
								i{
									margin-right: 22px;
								}
							}
							&.active{
								background-color:#2a3344;
								color: #fff;
								&::before{
									content:' ';
									display: inline-block;
									width: 4px;
									height: 100%;
									/*float: right;*/
									background-color: $light;
									position: absolute;
									top: 0;
									left: 0;
								}
							}
							/*&:hover{
								background-color:$black2;
							}*/
						}
					}
				}
				.right-content{
					background-color: #e5edf1;
					padding: 20px;
					margin-left: 260px;
					height: 100%;
					overflow-x: auto;
					box-shadow: 0 2px 2px 0 #dbe2e6 inset;
					.container{
						height: 100%;
						min-width: 721px;
						/*position: fixed;*/
					}
				}
			}
		}
	}
}